<template>
  <div class="jaguar-view dev-menu">
    <div class="jaguar-search" />
    <div class="jaguar-control">
      <add-button @click="handleCreate" />
    </div>

    <Card>
      <template #content>
        <Tabs v-model:value="clientId">
          <TabList>
            <Tab
              v-for="client in clients"
              :key="client.id"
              :value="client.clientId"
              >{{ client.clientName }}</Tab
            >
          </TabList>
        </Tabs>

        <TreeTable ref="table" :value="tableData" :loading="loading">
          <Column header="名称" expander>
            <template #body="scope">
              {{
                scope.node.data.serverName
                  ? scope.node.data.serverName
                  : scope.node.data.menuName
              }}
            </template>
          </Column>

          <Column field="menuPermission" header="权限" />
          <Column field="menuType" header="菜单类型与图标">
            <template #body="scope">
              <dictionary-label
                :value="scope.node.data.menuType"
                dicKey="menuType"
              />
              &nbsp;

              <template v-if="scope.node.data.menuIcon">
                <el-icon v-if="scope.node.data.menuIcon.endsWith('.svg')">
                  <icon-svg
                    :name="
                      scope.node.data.menuIcon.substr(
                        0,
                        scope.node.data.menuIcon.length - 4
                      )
                    "
                  />
                </el-icon>
                <el-button v-else text :icon="scope.node.data.menuIcon" />
              </template>
            </template>
          </Column>
          <Column field="menuPage" header="展示页面" />
          <Column field="menuOrder" header="排序" width="80" />
          <Column header="操作">
            <template #body="scope">
              <span v-if="!scope.node.data.serverName">
                <view-button @click="handleView(scope.node.data)" />
                <edit-button @click="handleEdit(scope.node.data)" />
                <Button
                  text
                  icon="pi pi-copy"
                  @click="handleCopy(scope.node.data)"
                  >复制
                </Button>
                <delete-button @confirm="handleDelete(scope.node.data)" />
              </span>
            </template>
          </Column>
        </TreeTable>
      </template>
    </Card>

    <Edit :dialog="dialog" @success="getData()" />
  </div>
</template>
<script>
import { tree2TableData } from '@/utils'
import { fetchTree, del } from '@/api/upms/menu'
import { fetchList as fetchClientList } from '@/api/upms/oauth2Client'
import Edit from './Edit'

export default {
  name: 'Menu',
  data() {
    return {
      loading: false,
      tableData: [],
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
      clients: [],
      clientId: '',
    }
  },
  components: {
    Edit,
  },
  mounted() {
    fetchClientList({ menuRelated: true }).then((res) => {
      this.clients = res.data.data.records
      this.clientId = this.clients[0].clientId

      this.getData()
    })
  },
  watch: {
    clientId() {
      this.getData()
    },
  },
  methods: {
    getData() {
      this.$nextTick(() => {
        this.loading = true
        fetchTree(this.clientId)
          .then((res) => {
            this.tableData = tree2TableData(res.data.data, 'id', 'menuName')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    handleCreate() {
      this.dialog.entity = {
        clientId: this.clientId,
      }

      this.dialog.menus = this.tableData
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleCopy(row) {
      this.dialog.entity = Object.assign({}, row)
      this.dialog.entity.id = null

      this.dialog.menus = this.tableData
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.entity = row
      this.dialog.menus = this.tableData
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.menus = this.tableData
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row) {
      del(row.id).then(() => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
  },
}
</script>
<style lang="scss">
.dev-menu {
  .el-table tr {
    height: 65px;
  }

  .el-tabs__content {
    height: 100%;
    overflow: auto;
  }
}
</style>
